<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style type="text/css"> 
  .box::after{
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    background-color: #a1511c;
  }

  .box.active::after{
    background-color: #000;
  }

  a{
    text-decoration: none;
  }
  ul{
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .dropdown{
    width: 200px;
    height: 50px;
    background-color: #000;
    position: relative;
  }
  /* 图标向下 */
  .dropdown::after{
    content: " ";
    display: block;
    position: absolute;
    width: 0px;
    height: 0px;
    top: 20px;
    right: 15px;
    border: solid 10px #fff;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    cursor: pointer;
  }
  /* 图标向上 */
  .dropdown.up::after{
    /* transform: scale(180deg); */
    content: " ";
    display: block;
    position: absolute;
    width: 0px;
    height: 0px;
    top: 10px;
    right: 15px;
    border: solid 10px #fff;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
  }
  .dropdown a{
    display: block;
  }
  .dropdown .main{
    height: 100%;
    text-align: center;
    line-height: 50px;
    color: #fff;
  }
  
  .dropdown .list{
    height: 0;
    overflow: hidden;
  }
  .dropdown .item{
    height: 40px;
    line-height: 40px;
    background-color: #333;
  }
  .dropdown .item:hover{
    background-color: #000;
  }
  .dropdown .item a{
    height: 100%;
    color: #999;
    text-align: center;
    line-height: 40px;
  }
  
</style>
<body>
  <div style="width: 200px; height: 200px; background-color: green;" class="box">
  </div>

  <div class="dropdown">
    <a href="#" class="main">下拉菜单</a>
    <ul class="list">
      <li class="item"><a href="#">项目1</a></li>
      <li class="item"><a href="#">项目2</a></li>
      <li class="item"><a href="#">项目3</a></li>
      <li class="item"><a href="#">项目4</a></li>
      <li class="item"><a href="#">项目5</a></li>
    </ul>
  </div>
  
</body>
<script type="text/javascript">
  /**
  * 查看计算样式
    window.getComputedStyle(elem, null)[prop];
    window.getComputedStyle(elem, null).prop

    IE8及以下不支持
    elem.currentStyle
  **/ 

  function getStyle(elem, prop){
    if(window.getComputedStyle){
      if(prop){
        return window.getComputedStyle(elem)[prop];
      }else{
        return window.getComputedStyle(elem);
      }
    }else{
      if(prop){
        return elem.currentStyle[prop];
      }else{
        return elem.currentStyle;
      }
    }
  }

  var odiv = document.getElementsByTagName("div")[0];
  odiv.onclick = function(){
    console.log("asdf");
    this.classList.toggle("active");
  }

  function elemChidren(node){
    var arr = [],
    children = node.childNodes;
    for(let i = 0; i < children.length; i++){
      var childItem = children[i];
      if(childItem.nodeType === 1){
        arr.push(childItem);
      }
    }
    return arr;
  }

  // 实现移入显示消失
  var dropdown = document.getElementsByClassName("dropdown")[0],
      olist = elemChidren(dropdown)[1],
      timer = null,
      listHeight = 0,
      speed = 5;
  
  //鼠标移入 
  dropdown.onmouseenter = function(){
    clearInterval(timer);
    timer = setInterval(() => {
      if(listHeight >= 200){
        clearInterval(timer);
      }else{
        listHeight = parseInt(getStyle(olist, "height")) + speed;
        olist.style.height = listHeight + 'px';
      }
    }, 1);
    this.classList.toggle("up");
  }
  // 鼠标移出
  dropdown.onmouseleave = function(){
    clearInterval(timer);
    timer = setInterval(() => {
      if(listHeight <= 0){
        clearInterval(timer);
      }else{
        listHeight = parseInt(getStyle(olist, "height")) - speed;
        olist.style.height = listHeight + 'px';
      }
    }, 1);
    this.classList.toggle("up");
  }
  

 
      
  



</script>
</html>